<script>
import { defineComponent, computed } from 'vue'
import { createNamespace, isCssRelativeSize, transformSize, transformStyleSize } from '../utils'

export default defineComponent({
	name: createNamespace('Tag')[0],
	options: {
		// https://uniapp.dcloud.io/matter.html#mp
		virtualHost: true
	},
	emits: ['click'],
	props: {
		color: String,
		bg: String,
		width: String,
		height: String,
		margin: String,
		padding: String,
		textSize: {
			type: [String, Number]
		},
		textColor: String,
		bold: [Boolean, String],
		/**
		 * 是否为朴素模式
		 */
		plain: {
			type: Boolean,
			default: false
		},
		/**
		 * 是否有边框，plain朴素时生效
		 */
		border: {
			type: Boolean,
			default: true
		},
		/**
		 * 边框颜色，默认为 color
		 */
		borderColor: String,
		/**
		 * 圆角
		 */
		radius: [String, Number],
		/**
		 * 是否使用 0.5px 边框
		 */
		hairline: {
			type: Boolean,
			default: false
		}
	},
	setup(props, context) {
		const theStyle = computed(() => {
			const { color, bg: background, plain, textSize, textColor, radius, borderColor } = props
			const obj = {}
				;['width', 'height', 'padding', 'margin'].forEach((k) => props[k] && (obj[k] = props[k]))

			const bg = background || (plain ? 'white' : color)
			if (bg) obj['--fan2-tag-bg'] = bg

			const c = textColor || (plain ? color || 'var(--fan-primary-color)' : !color ? '' : 'white')
			if (c) obj['--fan2-tag-text-color'] = c
			if (textSize) obj.fontSize = transformSize(textSize)

			// 可以考虑用TinyColor.tint(20)对非css-var颜色的border浅色一下
			if (plain && (color || borderColor)) obj['--fan2-tag-border-color'] = borderColor || color

			if (radius || radius === 0) obj['--fan2-tag-border-radius'] = radius

			return transformStyleSize(obj)
		})

		const inStyle = computed(() => {
			let s = 'max-width:100%;'
			if (props.textSize) s += `font-size:${transformSize(props.textSize)}`
			return s
		})

		const onClick = (e) => {
			context.emit('click', e)
		}

		return { theStyle, inStyle, onClick }
	}
})
</script>

<template>
	<div class="fan2-tag" :class="{
		'fan2-tag--noborder': !border,
		'fan2-tag--hairline': hairline,
		'fan2-tag--plain': plain,
		'fan2-tag--bold': bold
	}" :style="theStyle" @click="onClick">
		<!-- fix：uniapp-App-伪元素超不出100% -->
		<div v-if="hairline" class="fan2-tag__hairline"></div>
		<div :style="inStyle" class="fan-ellipsis">
			<slot />
		</div>
	</div>
</template>

<style lang="less">
.fan2-tag {
	--fan2-tag-bg: var(--fan-primary-color);
	--fan2-tag-text-color: var(--fan-primary-fg-color);
	--fan2-tag-border-color: var(--fan-primary-color);
	--fan2-tag-border-radius: 2px;

	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex: none;
	vertical-align: middle;
	height: 16px;
	margin: 0;
	padding: 0 4px;
	font-size: 12px;
	line-height: 1;
	color: var(--fan2-tag-text-color);
	background: var(--fan2-tag-bg);
	border-radius: var(--fan2-tag-border-radius);
	box-sizing: border-box;
	overflow: hidden;

	&::after {
		display: none;
	}

	&+.fan2-tag {
		margin-left: 8px;
	}

	&--plain {
		--fan2-tag-border-color: var(--fan-primary-color-8);
		border: 1px solid var(--fan2-tag-border-color);
	}

	&--bold {
		font-weight: var(--fan-text-mbold);
	}

	&--noborder {
		border: 0;
		background: transparent;

		.fan2-tag__hairline {
			display: none;
		}
	}

	&--hairline {
		border: 0;
		overflow: visible;
		position: relative;

		.fan2-tag__hairline {
			pointer-events: none;
			position: absolute;
			top: -50%;
			left: -50%;
			right: -50%;
			bottom: -50%;
			border: 1px solid var(--fan2-tag-border-color);
			border-radius: calc(var(--fan2-tag-border-radius) * 2);
			transform: scale(0.5);
		}
	}
}
</style>